<template>
    <view class="a-flex-start" @click.stop="change">
        <image src="/static/ui/check-1.png" v-if="value" :style="{width:size+'px',height:size+'px'}"></image>
        <image src="/static/ui/check-0.png" v-else :style="{width:size+'px',height:size+'px'}"></image>
        <text v-if="label">
            {{label}}
        </text>
    </view>
</template>

<script>
    export default {
        name: "my-checkbox",
        props: {
            value: {
                type: Boolean
            },
            size: {
                type: Number,
                default: 20
            },
            label: {
                type: String
            }
        },
        methods: {
            change() {
                this.$emit('input', !this.value);
            }
        },
    }
</script>

<style scoped lang="less">
    text {
        margin-left: unit(20, upx);
    }
</style>
